import React, { useState, useEffect } from 'react'
import { Link, Route} from 'react-router-dom'
import {Breadcrumb, Tabs,Input, Select, DatePicker, Space, Button, Row, Col, Table } from "antd"
import { SearchOutlined, CloudUploadOutlined } from '@ant-design/icons';
import locale from 'antd/es/date-picker/locale/zh_CN';
import style from "./index.module.scss"


const { TabPane } = Tabs;
const { Option } = Select
const { RangePicker } = DatePicker;
export default function Chuli() {
    const [selectedRowKeys, setSelectedRowKeys] = useState([])
    const [currentPage, setCurrentPage] = useState('1')
    const [Hetong,setHetong] =useState("")
    const [name, setName] = useState('')
  const [phoneNumber, setPhoneNumber] = useState('')
    const [pageSize, setPageSize] = useState('10')
    const columns = [
        {
            title: '编号',
            dataIndex: 'id',
        },
        {
            title: '姓名',
            dataIndex: 'name',
        },
        {
            title: '合同号',
            dataIndex: 'shengqi_data',
        },
        {
            title: '申请日期',
            dataIndex: 'phonenumber',
        },
        {
            title: '审批金额',
            dataIndex: 'shengqingedu',
        },
        {
            title: '合同金额',
            dataIndex: 'back_type',
        },
        {
            title: '借款期限',
            dataIndex: 'time_longer',
        },
        {
            title: '贷款类型',
            dataIndex: 'load_type',
        },
        {
            title: '还款方式',
            dataIndex: 'status',
        },
        {
            title: '放款时间',
            dataIndex: 'chusheng_time',
        },
        {
            title: '放款通道',
            dataIndex: 'chusheng_person',
        },
        {
            title: '状态',
            dataIndex: 'fushen',
        },
        {
            title: '操作',
            dataIndex: 'action',
            render: () =>
                <Route>
                    <Link to='/home/fangkuandengji' >放款登记</Link>
                    <Link to='/home/weituofangkuan' >委托放款</Link>
                </Route>
            ,
        },
    ];
    const callback = (key) => {
        console.log(key);
    }
    const data = [];
    for (let i = 0; i < 10; i++) {
        data.push({
            key: i,
            id: `100${i}`,
            name: `小花${i}`,
            shengqi_data: '2021-2-1',
            phonenumber: '1224346777',
            shengqingedu: '3545',
            back_type: '先息后本',
            time_longer: '12',
            load_type: '个人信用',
            status: '等待初审',
            chusheng_time: '2021-3-2',
            chusheng_person: '张小娴',
            fushen:'张小娴',
            zhongshen:"-"
        });

    }
    const onSelectChange = selectedRowKeys => {
        console.log('selectedRowKeys changed: ', selectedRowKeys);
        setSelectedRowKeys(selectedRowKeys)
    };
    const rowSelection = {
        selectedRowKeys,
        onChange: onSelectChange,
        selections: [
            Table.SELECTION_ALL,
            Table.SELECTION_INVERT,
            Table.SELECTION_NONE,
            {
                key: 'odd',
                text: 'Select Odd Row',
                onSelect: changableRowKeys => {
                    let newSelectedRowKeys = [];
                    newSelectedRowKeys = changableRowKeys.filter((key, index) => {
                        if (index % 2 !== 0) {
                            return false;
                        }
                        return true;
                    });
                    setSelectedRowKeys(newSelectedRowKeys)
                },
            },
            {
                key: 'even',
                text: 'Select Even Row',
                onSelect: changableRowKeys => {
                    let newSelectedRowKeys = [];
                    newSelectedRowKeys = changableRowKeys.filter((key, index) => {
                        if (index % 2 !== 0) {
                            return true;
                        }
                        return false;
                    });
                    setSelectedRowKeys(newSelectedRowKeys)
                },
            },
        ],
    };
    const getPage = (page, pageSize) => {
        console.log(page, pageSize)
        setCurrentPage(page)
        setPageSize(pageSize)
    }

  const onChangetype = (value) => {
    console.log('选择器获取值', `selected ${value}`);
  }
  const onSearchtype = (val) => {
    console.log('search:', val)
  }
  const onChangetime1 = (date, dateString) => {
    console.log('日期获取', date, dateString);
  }

  const onChangeName = (e) => {
    // console.log('姓名', e.target.value)
    setName(e.target.value)
  }
  const onChangePhone = (e) => {
    // console.log('姓名', e.target.value)
    setPhoneNumber(e.target.value)
  }
  const onChangeHetong = (e) => {
    // console.log('姓名', e.target.value)
    setHetong(e.target.value)
  }
    return (
        <div className={style.box}>
            <Breadcrumb style={{ margin: '16px 0',display:"flex",justifyContent:"start"}}>
                <Breadcrumb.Item>首页</Breadcrumb.Item>
                <Breadcrumb.Item>贷中管理</Breadcrumb.Item>
                <Breadcrumb.Item>放款处理列表</Breadcrumb.Item>
            </Breadcrumb>
            <Tabs defaultActiveKey="1" onChange={callback} className='tabs'>
            <TabPane tab="待放款" key="1">
            <div>
                <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>
                    <Col className="gutter-row" span={6}>
                    <div>
                        <Input placeholder="借款编号" onChange={onChangeName} />
                    </div>
                    </Col>
                    <Col className="gutter-row" span={3}>
                    <div>
                        <Input placeholder="姓名" onChange={onChangePhone} />
                    </div>
                    </Col>
                    <Col className="gutter-row" span={3}>
                    <div>
                        <Input placeholder="合同号" onChange={onChangeHetong} />
                    </div>
                    </Col>
                    <Col className="gutter-row" span={2}>
                    <div>
                        <Select
                        showSearch
                        placeholder="贷款类型"
                        optionFilterProp="children"
                        onChange={onChangetype}
                        onSearch={onSearchtype}
                        filterOption={(input, option) =>
                            option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                        }
                        >
                        <Option value="jack">Jack</Option>
                        <Option value="lucy">Lucy</Option>
                        <Option value="tom">Tom</Option>
                        </Select>
                    </div>
                    </Col>
                    <Col className="gutter-row" span={6}>
                    <div>
                        <Space direction="vertical" size={12}>
                        <RangePicker locale={locale} onChange={onChangetime1} />
                        </Space>
                    </div>
                    </Col>
                    <Col className="gutter-row" span={4}>
                    <div>
                        <Button icon={<SearchOutlined />} type='button' >
                        查询
                        </Button>
                    </div>
                    </Col>
                </Row>
                <div className={style.title}>
                    <p className={style.list}>数据列表</p>
                    <Button className='button'><CloudUploadOutlined className="icon" />导出</Button>
                </div>
                <Table rowSelection={rowSelection} columns={columns} dataSource={data} pagination={{
                        total: data.length,
                        showQuickJumper: true,
                        showSizeChanger: true,
                        pageSizeOptions: ['10', '20', '30'],
                        showTotal: total => `共${Math.ceil(total / pageSize)}页/ ${total} 条数据`,
                        onChange: getPage
                    }}
                        onRow={record => {
                            return {
                                onClick: event => { console.log(event, record) },
                            }
                        }}
                    />
            </div>  
            
            </TabPane>
            <TabPane tab="已放款" key="2">
            
            <div>
                <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>
                    <Col className="gutter-row" span={6}>
                    <div>
                        <Input placeholder="姓名" onChange={onChangeName} />
                    </div>
                    </Col>
                    <Col className="gutter-row" span={6}>
                    <div>
                        <Input placeholder="手机号" onChange={onChangePhone} />
                    </div>
                    </Col>
                    <Col className="gutter-row" span={2}>
                    <div>
                        <Select
                        showSearch
                        placeholder="贷款类型"
                        optionFilterProp="children"
                        onChange={onChangetype}
                        onSearch={onSearchtype}
                        filterOption={(input, option) =>
                            option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                        }
                        >
                        <Option value="jack">Jack</Option>
                        <Option value="lucy">Lucy</Option>
                        <Option value="tom">Tom</Option>
                        </Select>
                    </div>
                    </Col>
                    <Col className="gutter-row" span={6}>
                    <div>
                        <Space direction="vertical" size={12}>
                        <RangePicker locale={locale} onChange={onChangetime1} />
                        </Space>
                    </div>
                    </Col>
                    <Col className="gutter-row" span={4}>
                    <div>
                        <Button icon={<SearchOutlined />} type='button' >
                        查询
                        </Button>
                    </div>
                    </Col>
                </Row>
                <div className={style.title}>
                    <p className={style.list}>数据列表</p>
                    <Button className='button'><CloudUploadOutlined className="icon" />导出</Button>
                </div>
                    <Table rowSelection={rowSelection} columns={columns} dataSource={data} pagination={{
                            total: data.length,
                            showQuickJumper: true,
                            showSizeChanger: true,
                            pageSizeOptions: ['10', '20', '30'],
                            showTotal: total => `共${Math.ceil(total / pageSize)}页/ ${total} 条数据`,
                            onChange: getPage
                        }}
                            onRow={record => {
                                return {
                                    onClick: event => { console.log(event, record) },
                                }
                            }}
                        />
                </div>   
            </TabPane>
        </Tabs>
        </div>
    )
}
